<script setup lang='ts'>
import {ref} from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import addOrEdit  from './addOrEdit.vue'
import pageContainer from '../../components/pageContainer.vue'

const data = {
  "users": [
    {
      "user_id": "admin001",
      "username": "superadmin",
      "email": "admin1@example.com",
      "role": "超级管理员",
      'authority': '所有权限',
      "status": "激活",
      "last_login": "2024-12-04T12:15:23Z",
    },
    {
      "user_id": "admin002",
      "username": "esportsadmin",
      "email": "admin2@example.com",
      "role": "赛事管理员",
      'authority': '所有权限',
      "status": "激活",
      "last_login": "2024-12-02T09:45:12Z",
    
    },
    {
      "user_id": "admin003",
      "username": "datamanager",
      "email": "admin3@example.com",
      "role": "数据管理员",
      'authority': '所有权限',
      "status": "激活",
      "last_login": "2024-12-01T17:30:45Z",
     
    },
    {
      "user_id": "user001",
      "username": "playerone",
      "email": "player1@example.com",
      "role": "普通用户",
      'authority': '所有权限',
      "status": "激活",
      "last_login": "2024-12-05T08:00:01Z",
     
    },
    {
      "user_id": "user002",
      "username": "player2",
      "email": "player2@example.com",
      "role": "普通用户",
      'authority': '所有权限',
      "status": "激活",
      "last_login": "2024-12-03T18:00:23Z",
     
    },
    {
      "user_id": "user003",
      "username": "testuser",
      "email": "testuser@example.com",
      "role": "普通用户",
      'authority': '所有权限',
      "status": "禁用",
      "last_login": null,
    }
  ],
  
  
}
  const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
})


// 删除管理员信息
const delChannel = async(row, index)=>{
  await ElMessageBox.confirm('你确认删除该管理员信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    })
    const dataUsers = this.data.users.value.splice(index, 1)
    this.data.users.value = dataUsers
}

// 编辑弹框
const dialog = ref()
const editChannel = (row, $index) => {
  dialog.value.open(row)
  console.log(row, $index)
}

// 添加弹框
const addChannel = () => {
  dialog.value.open({})
}
</script>

<template>
  <pageContainer title='管理员账户数据'>
    <template #extra>
      <el-button type="primary" @click="addChannel">添加管理员</el-button>
    </template>
    <el-table v-loading="loading" :data="data.users" border style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="用户id" prop="user_id"></el-table-column>
      <el-table-column label="用户名" prop="username"> </el-table-column>
      <el-table-column label="角色" prop="role"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="权限" prop="authority"></el-table-column>
      <el-table-column label="最后登录时间" prop="last_login"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="{ row, $index }">
          <el-button
            type="primary"
            plain
            @click="editChannel(row, $index)"
            :icon="Edit"
            circle
          ></el-button>
          <el-button type="danger" plain :icon="Delete" circle @click="delChannel(row , $index)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <addOrEdit ref='dialog' @success="onSuccess"></addOrEdit>
    <el-pagination
          v-model:current-page="params.pagenum"
          v-model:page-size="params.pagesize"
          :page-sizes="[2, 3, 5, 10]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.users.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
  </pageContainer>
</template>
<style lang="scss" scope>
.el-table .cell{
  text-align:center
}

</style>